<template>
	<!-- #ifdef APP-NVUE -->
	<list :render-whole="true" :style="listStyle" :loadmoreoffset="lowerThreshold" @loadmore="loadmore">
		<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
			<text class="refresh-text">{{refreshText}}</text>
			<loading-indicator class="refresh-icon"></loading-indicator>
		</refresh>
		<cell>
			<view :style="{ height: paddingTop }"></view>
		</cell>
		<slot:render-whole="true" v-if="allSlot"></slot>
		<cell :render-whole="true" v-for="(item,index) in getNvueList" :key="item[idField]">
			<slot :listItem="item" :listIndex="index"></slot>
		</cell>
	</list>
	<!-- #endif -->
	<!-- #ifndef APP-NVUE -->
	<view @touchmove="voidfn">
		<scroll-view scroll-y="true" :style="listStyle" refresher-enabled="true"
			:refresher-triggered="refreshing" :refresher-threshold="100" refresher-background="#f5f5f5"
			@refresherpulling="onpullingdown" @refresherrefresh="onrefresh" @refresherrestore="onrestore"
			@refresherabort="onabort" :lower-threshold="lowerThreshold" @scrolltolower="loadmore">
			<view :style="{ height: paddingTop }"></view>
			<slot v-if="allSlot"></slot>
			<block v-else>
				<block v-for="(item, index) in list" :key="item[idField]">
					<slot :listItem="item" :listIndex="index"></slot>
				</block>
			</block>
		</scroll-view>
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			listStyle: {
				type: [String, Object, Array],
				default: ''
			},
			refresStatus: {
				type: Boolean,
				default: false
			},
			lowerThreshold: {
				type: Number,
				default: 50
			},
			idField: {
				type: String,
				default: 'id'
			},
			allSlot: {
				type: Boolean,
				default: false
			},
			paddingTop: {
				type: String,
				default: '10px'
			}
		},
		computed: {
			getNvueList() {
				return this.allSlot?[]:this.list;
			}
		},
		watch: {
			refresStatus(n) {
				this.setRefresh(n);
			}
		},
		data() {
			return {
				refreshing: false,
				refreshBl: false,
				refreshText: '下拉刷新'
			}
		},
		methods: {
			loadmore() {
				this.$emit('loadmore');
			},
			setRefresh(bl) {
				this.refreshing = bl;
			},
			onrefresh(e) {
				// console.log('onrefresh', e);
				// #ifdef APP-NVUE
				if (this.refreshBl) {
					this.refreshText = '刷新中';
					this.refreshing = true;
					this.$emit('refresh');
				} else {
					this.refreshText = '下拉刷新';
					this.refreshing = false;
				}
				// #endif
				// #ifndef APP-NVUE
					this.refreshing = true;
					this.$emit('refresh');
				// #endif
			},
			onpullingdown(e) {
				// console.log('onpullingdown', e);
				// #ifdef APP-NVUE
				if (e.pullingDistance < e.viewHeight) {
					this.refreshText = '下拉刷新';
					this.refreshBl = false;
				} else if (e.pullingDistance > e.viewHeight) {
					this.refreshText = '松开刷新';
					this.refreshBl = true;
				}
				// #endif
			},
			onrestore(e) {
			},
			onabort(e) {
			},
			voidfn() {}
		}
	}
</script>

<style lang="scss">
	.refresh{
		// #ifndef APP-NVUE
		display: flex;
		// #endif
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 50px;
		
		.refresh-text {
			font-size: 14px;
			color: #999999;
		}
		.refresh-icon {
			margin: 0 5px;
			height: 14px;
			width: 14px;
			color: #61B665;
		}
	}
</style>
